<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>kendo spreadsheet</title>
	<link rel="stylesheet" type="text/css" href="kendo.common.min.css">
	<link rel="stylesheet" type="text/css" href="kendo.silver.min.css">
	<style type="text/css" media="screen">
		*{padding: 0;margin: 0;}
	</style>
</head>
<body style="height: 100vh;">
	<div id="spreadsheet" style="width: 100%;height:100%;"></div>
	<script src="jquery.js"></script>
	<script src="kendo.custom.js"></script>
	<script src="jszip.min.js"></script>
	<script>
		// var nodeChild1 = kendo.dom.element('input', { className: 'k-checkbox', type: 'checkbox', tabindex: '-1' }, null)
    // var nodeChild2 = kendo.dom.element('span', { className: 'k-checkbox-label' }, null)
    // var node = kendo.dom.element('div', { className: 'k-checkbox-wrapper' }, [nodeChild1, nodeChild2]);
    // console.log('node', node);
    // return node
		// $.ajax({
  //       url: "/readData/rendercell",
  //       type: "get",
  //       datatype: "json",
  //       contentType: "application/json; charset=utf-8",
  //       success: function(rsp, stats) {
  //       	$("#spreadsheet").kendoSpreadsheet().data("kendoSpreadsheet").fromJSON(rsp.data,true);
  //       	var kendospreadsheet = $('#spreadsheet').data('kendoSpreadsheet');
  //       },
  //       error: function(data) {
  //       }
  //   });
		$.ajax({
        url: "/readData/spreadsheet",
        type: "get",
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        success: function(rsp, stats) {
        	let json = JSON.parse(rsp.data);
        	console.log('json', json);
          let onChange = function() {
            console.log(arguments);
          }
        	$("#spreadsheet").kendoSpreadsheet({ maxAnalysisCol: 2, change: onChange }).data("kendoSpreadsheet").fromJSON(json);
        	var kendospreadsheet = $('#spreadsheet').data('kendoSpreadsheet');
        },
        error: function(data) {
        }
    });
	</script>
</body>
</html>